<template>
  <div class="bottomcontent">
    <ul class="left">
      <li>
        <img src="~assets/img/little-icon/back.png" alt="" />
        <span>客服</span>
      </li>
      <li>
        <img src="~assets/img/little-icon/back.png" alt="" />
        <span>客服</span>
      </li>
      <li>
        <img src="~assets/img/little-icon/back.png" alt="" />
        <span>客服</span>
      </li>
    </ul>
    <ul class="right">
      <li @click="addcart">加入购物车</li>
      <li>购买</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    addcart() {
      this.$emit("addcart");
    },
  },
};
</script>
<style scoped>
.bottomcontent {
  height: 49px;
  display: flex;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  /* z-index: 1000; */
  right: 0;
}
.left,
.right {
  flex: 1;
  display: flex;
}
.left li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
}
.right li {
  /* height: 100%; */
  line-height: 49px;
  width: 50%;
  text-align: center;
}
li img {
  width: 30px;
  height: 30px;
}
.right li:nth-child(1) {
  background-color: yellow;
}
.right li:nth-child(2) {
  background-color: pink;
  color: white;
}
</style>
